<template>
  <div class="NewsDetial">
    <!-- 顶部 -->
    <van-nav-bar
      title="传智播客.黑马程序员Vue.js"
      style="background-color: #26a2ff; margin-bottom: 5px"
    />
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title="资讯详情"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-icon
            name="wap-home-o"
            size="18"
            @click="$router.push({ name: 'Home' })"
          />
        </template>
      </van-nav-bar>
    </div>

    <div class="content">
      <div class="smalltitle">
        <h2>{{ newsDetail.length > 0 && newsDetail[0].title }}</h2>
        <span class="first">{{
          newsDetail.length > 0 && newsDetail[0].add_time | dateformat
        }}</span>
        <span>{{ newsDetail.length > 0 && newsDetail[0].click }} 次浏览</span>
        <span>分类：{{ newsDetail.length > 0 && newsDetail[0].category }}</span>
      </div>
    </div>

    <div
      class="contain"
      v-html="newsDetail.length > 0 && newsDetail[0].content"
    ></div>
    <div>
      <div class="headers">
        <h1 class="comment_title">提交评论</h1>
        <p class="back" @click="handleback()">返回</p>
      </div>
      <hr />
      <div class="comment">
        <van-field
          v-model="content"
          type="textarea"
          border
          placeholder="请输入评论内容"
        />
        <van-button class="comment_btn" type="info" @click="handleadd()"
          >发表</van-button
        >
        <hr />
      </div>
      <div class="comment_centent">
        <h1 class="comment_title">评论列表</h1>
        <p class="comment_centent_span">{{ this.total }}条评论</p>
      </div>
      <hr />
      <div
        class="comment_centent_list"
        v-for="item in commentList"
        :key="item.id"
      >
        <p class="comment_centent_list_top">{{ item.content }}</p>
        <div class="comment_centent_list_con">
          <p class="comment_centent_list_con_left">{{ item.user_name }}</p>
          <p>{{ item.add_time | dateformat }}</p>
        </div>
      </div>
      <van-button class="comment_bom_btn" @click="handleMove()"
        >加载更多</van-button
      >
    </div>
  </div>
</template>

<script>
import { getnewsById, getcomments } from "@/apis/newsInformation";
import { dateformat } from "@/utils/filteror";
// import Comment from "@/components/Comment";
import axios from "@/utils/request";
export default {
  // components: { Comment },
  data() {
    return {
      newsDetail: [],
      content: "",
      total: "",
      commentList: [],
      pageindex: 1,
    };
  },
  async mounted() {
    let res = await getnewsById(this.$route.params.id);
    this.newsDetail = res.data.message;
    let datalist = await getcomments(this.$route.params.id);
    this.commentList = datalist.data.message;
    this.total = datalist.data.total;
  },
  filters: {
    dateformat,
  },
  methods: {
    async handleadd() {
      let id = this.$route.params.id;
      let data = { content: this.content };
      console.log(data);
      axios
        .post(
          `http://157.122.54.189:9073/api/postcomment/${id}`,
          `content=${this.content}`
        )
        .then(async (res) => {
          this.$toast.success(res.data.message);
          let datalist = await getcomments(this.$route.params.id);
          this.commentList = datalist.data.message;
          this.content = "";
        });
    },
    handleback() {
      this.$router.push({
        name: "NewsList",
      });
    },
    async handleMove() {
      this.pageindex += 1;
      let pageCount = this.pageindex;
      let id = this.$route.params.id;
      axios
        .get(
          `http://157.122.54.189:9073/api/getcomments/${id}?pageindex=${pageCount}`
        )
        .then((res) => {
          if (res.data.message.length >= 1) {
            this.commentList = this.commentList.concat(res.data.message);
          } else {
            this.$toast.fail("没有更多");
          }
        })
        .catch((err) => {
          console.log(111);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.NewsDetial {
  .header {
    width: 100%;
    /deep/ .van-nav-bar__title {
      color: #1989fa;
    }
    /deep/ .van-nav-bar {
      background-color: #f7f7f7;
    }
  }

  .content {
    padding: 0 5px;
    border-bottom: 1px solid #ccc;
    h2 {
      color: #007ad2;
      margin-top: 15px;
    }
    span {
      display: inline-block;
      color: #999;
      font-size: 12px;
      margin-left: 20px;
      padding-top: 15px;
      padding-bottom: 25px;
    }
    .first {
      margin-left: 0;
    }
  }
  /deep/.contain {
    margin-top: 5px;
    padding: 0 5px;
    p {
      line-height: 25px;
      color: #666;
      b {
        font-weight: 600;
        color: #333;
        line-height: 30px;
        margin: 10px 0;
        display: block;
        // height: 20px;
      }
    }
  }
}
/deep/.van-field__control {
  height: 100px;
  width: 340px;
  border: 1px solid #000;
  font-size: 20px;
  color: #333;
  padding: 5px;
}
.headers {
  display: flex;
  justify-content: space-between;
}
.back {
  line-height: 60px;
  margin-right: 90px;
  color: #0f82ff;
}

.comment_btn {
  width: 340px;
  margin-left: 15px;
  color: #fff;
  font-size: 20px;
  border-radius: 5px;
}
.comment_centent {
  width: 340px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .comment_title {
    font-weight: 700;
    padding: 15px;
    font-size: 20px;
  }
}

.comment_centent_list {
  margin-top: 10px;
  padding: 0px 20px 10px;
  border-bottom: 1px solid #9a9a9a;
}
.comment_centent_list_top {
  font-size: 15px;
  color: darkgrey;
  margin-bottom: 10px;
}
.comment_centent_list_con {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-right: 120px;
}
.comment_centent_list_con_left {
  font-style: 15px;
  color: #5aafff;
}
.comment_centent_list_con_right {
  font-size: 15px;
  color: darkgrey;
}
.comment_bom_btn {
  margin-top: 20px;
  border: 1px solid red;
  color: red;
  width: 100%;
  font-size: 20px;
}
</style>
